<template>
  <view class="upload-sidebar" v-if="showSidebar">
    <view class="sidebar-content">
      <view class="sidebar-header">
        <text class="sidebar-title">上传任务</text>
        <text class="sidebar-count">{{ activeTasks.length }}</text>
      </view>
      <view class="task-list">
        <view 
          v-for="task in activeTasks" 
          :key="task.id" 
          class="task-item"
          :class="{ 'task-error': task.status === 'error', 'task-success': task.status === 'success' }"
        >
          <view class="task-thumbnail" v-if="task.thumbnail">
            <image :src="task.thumbnail" mode="aspectFill"></image>
          </view>
          <view class="task-info">
            <view class="task-name">{{ getShortFileName(task.name) }}</view>
            <view class="task-size">{{ formatFileSize(task.size) }}</view>
            <view class="progress-bar" v-if="task.status === 'uploading'">
              <view class="progress-fill" :style="{ width: task.progress + '%' }"></view>
            </view>
            <view class="task-status" v-if="task.status !== 'uploading'">
              {{ task.status === 'success' ? '上传成功' : '上传失败' }}
            </view>
            <view v-if="task.status === 'error'" class="error-message">
              {{ task.errorMessage || '未知错误' }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getUploadTasks, addUploadTaskListener } from '../utils/uploadManager';

export default {
  name: 'UploadSidebar',
  data() {
    return {
      tasks: [],
      removeListener: null
    };
  },
  computed: {
    activeTasks() {
      // 只显示正在上传、成功和失败的任务
      return this.tasks.filter(task => task.status !== 'removed');
    },
    showSidebar() {
      // 有任务时显示侧边栏
      return this.activeTasks.length > 0;
    }
  },
  created() {
    // 添加任务监听器
    this.removeListener = addUploadTaskListener(tasks => {
      this.tasks = tasks;
    });
  },
  destroyed() {
    // 移除任务监听器
    if (this.removeListener) {
      this.removeListener();
    }
  },
  methods: {
    getShortFileName(fileName, maxLength = 15) {
      if (fileName.length <= maxLength) {
        return fileName;
      }
      // 获取文件扩展名
      const parts = fileName.split('.');
      if (parts.length <= 1) {
        return fileName.substring(0, maxLength) + '...';
      }
      
      const extension = parts.pop();
      const baseName = parts.join('.');
      const remainingLength = maxLength - extension.length - 4; // 4 for '....'
      
      if (remainingLength <= 0) {
        return fileName.substring(0, maxLength) + '...';
      }
      
      return baseName.substring(0, remainingLength) + '....' + extension;
    },
    formatFileSize(bytes) {
      if (!bytes) {
        return '0 B';
      }
      
      const k = 1024;
      const sizes = ['B', 'KB', 'MB', 'GB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
  }
};
</script>

<style scoped>
.upload-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 300rpx;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  overflow-y: auto;
}

.sidebar-content {
  padding: 20rpx;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 20rpx;
}

.sidebar-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.sidebar-count {
  background-color: #667eea;
  color: white;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.task-item {
  display: flex;
  flex-direction: column;
  padding: 16rpx;
  background-color: #f9f9f9;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.task-thumbnail {
  width: 100%;
  height: 200rpx;
  border-radius: 8rpx;
  overflow: hidden;
  margin-bottom: 12rpx;
  background-color: #eee;
}

.task-thumbnail image {
  width: 100%;
  height: 100%;
}

.task-info {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.task-name {
  font-size: 26rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-size {
  font-size: 22rpx;
  color: #999;
}

.progress-bar {
  width: 100%;
  height: 6rpx;
  background-color: #eee;
  border-radius: 3rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #667eea;
  transition: width 0.3s ease;
}

.task-status {
  font-size: 22rpx;
  font-weight: 500;
}

.task-success .task-status {
  color: #4cd964;
}

.task-error .task-status {
  color: #ff3b30;
}

.error-message {
  font-size: 20rpx;
  color: #ff3b30;
  margin-top: 4rpx;
}

/* 适配不同屏幕尺寸 */
@media screen and (min-width: 768px) {
  .upload-sidebar {
    width: 250px;
  }
}

@media screen and (max-width: 375px) {
  .upload-sidebar {
    width: 250rpx;
  }
}
</style>